body > .super-hero {
    height: 550px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;

    & > img {
        max-width: none;
        height: 100%;

        @media screen and (max-width: $canvasMedium - 1) {
            margin-left: -470px;
        }

        @media screen and (min-width: $canvasMedium) and (max-width: $canvasLarge - 1) {
            margin-left: -260px;
        }

        @media screen and (min-width: $canvasLarge) {
            margin-left: -120px;
        }
    }
}

.site-header {
    position: relative;
    z-index: 10;

    & > .header-nav {
        float: right;
        margin: 0;

        & > .social-nav {
            display: inline-block;
            position: relative;
            @include pxRem(top, 8px);
            @include pxRem(padding-left, $fontSize * 1px);
        }
    }

}

.super-hero + .site-header > .header-nav {

    & > .site-nav > ul {
        color: $purewhite;
    }

    a {
        color: $purewhite;
        @include text-shadow();

        &:hover {
            color: $red;
            @include no-text-shadow();
        }
    }
}

.site-identity {
    // this only works in IE7 if the element has a native display: inline
    // TODO: IE fallback
    display: inline-block;
    margin-top: 0;
    @include pxRem(padding-top,    $fontSize / 2 * 1px);
    @include pxRem(padding-right,  20px);
    @include pxRem(padding-bottom, $fontSize / 2 * 1px);
    @include pxRem(padding-left,   20px);
    background-color: $purewhite;
}

// On the home page, the .site-header follows the .super-hero and so it will need special styles
.super-hero + .site-header {
    @include pxRem(margin-top, -550px);
    @include pxRem(height, 550px);
}

